<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>chinaMap</title>
    <script src="./lib/echarts.min.js"></script>
    <script src="lib/jquery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html {
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div
      id="charts"
      style="width: 1000px; height: 600px; border: 2px solid grey"
    ></div>
    <script>
      var myEcharts = echarts.init(document.getElementById("charts"));
      var airData = [
        { name: "北京", value: 39.92 },
        { name: "天津", value: 39.13 },
        { name: "上海", value: 31.22 },
        { name: "重庆", value: 66 },
        { name: "河北", value: 147 },
        { name: "河南", value: 113 },
        { name: "云南", value: 25.04 },
        { name: "辽宁", value: 50 },
        { name: "黑龙江", value: 114 },
        { name: "湖南", value: 175 },
        { name: "安徽", value: 117 },
        { name: "山东", value: 92 },
        { name: "新疆", value: 84 },
        { name: "江苏", value: 67 },
        { name: "浙江", value: 84 },
        { name: "江西", value: 96 },
        { name: "湖北", value: 273 },
        { name: "广西", value: 59 },
        { name: "甘肃", value: 99 },
        { name: "山西", value: 39 },
        { name: "内蒙古", value: 58 },
        { name: "陕西", value: 61 },
        { name: "吉林", value: 51 },
        { name: "福建", value: 29 },
        { name: "贵州", value: 71 },
        { name: "广东", value: 38 },
        { name: "青海", value: 57 },
        { name: "西藏", value: 24 },
        { name: "四川", value: 58 },
        { name: "宁夏", value: 52 },
        { name: "海南", value: 54 },
        { name: "台湾", value: 88 },
        { name: "香港", value: 66 },
        { name: "澳门", value: 77 },
        { name: "南海诸岛", value: 55 },
      ];
      var scatterData = [
        [117.283042, 31.86119],
        [116.405285, 39.904989],
      ];
      $.get("json/map/china.json", function (ret) {
        // console.log(ret);
        echarts.registerMap("chinaMap", ret);
        var options = {
          geo: {
            type: "map",
            map: "chinaMap",
            roam: true,
            label: {
              show: true,
            },
          },
          series: [
            {
              data: airData,
              type: "map",
              geoIndex: 0,
            },
            {
              data: scatterData,
              type: "effectScatter",
              coordinateSystem: "geo",
              // rippleEffect: {
              //   scale: 4,
              // },
              symbolSize: function (arg) {
                let longitude = arg[0];
                let latitude = arg[1];
                if (longitude === 116.405285) {
                  return 10;
                }
                return 5;
              },
              itemStyle: {
                color: function (arg) {
                  let longitude = arg.value[0];
                  console.log(longitude);
                  if (longitude === 116.405285) {
                    return "red";
                  }
                  return "white";
                },
              },
            },
          ],
          visualMap: {
            min: 0,
            max: 300,
            inRange: {
              color: ["white", "red"],
            },
            calculable: true,
          },
        };
        myEcharts.setOption(options);
      });
    </script>
  </body>
</html>
